<template>
  <t-dialog v-model:visible="formVisible" :header="formData.property_name + '-' + formData.name" :width="680"
    :footer="false" :on-closed="closed">
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :reset-type="resetType" :label-width="100" @submit="onSubmit">
        <t-form-item label="上月电表度数" name="electricity_meter_last_month">
          <t-input-number v-model="formData.electricity_meter_last_month" :style="{ width: '480px' }" theme="normal"
            placeholder="请输入上月电表度数" />
        </t-form-item>
        <t-form-item label="上月水表度数" name="water_meter_last_month">
          <t-input-number v-model="formData.water_meter_last_month" :style="{ width: '480px' }" theme="normal"
            placeholder="请输入上月水表度数" />
        </t-form-item>
        <t-form-item label="抄表日期" name="meter_reading_time">
          <t-date-picker v-model="formData.meter_reading_time" :style="{ width: '480px' }" mode="date" clearable />
        </t-form-item>
        <t-form-item label="本月电表度数" name="electricity_meter_this_month">
          <t-input-number v-model="formData.electricity_meter_this_month" :style="{ width: '480px' }" theme="normal"
            placeholder="请输入本月电表度数" />
        </t-form-item>
        <t-form-item label="本月水表度数" name="water_meter_this_month">
          <t-input-number v-model="formData.water_meter_this_month" :style="{ width: '480px' }" theme="normal"
            placeholder="请输入本月水表度数" />
        </t-form-item>
        <t-form-item label="房租" name="rental">
          <t-input-number v-model="formData.rental" :style="{ width: '480px' }" theme="normal" placeholder="请输入房租" />
        </t-form-item>
        <t-form-item label="押金" name="deposit">
          <t-input-number v-model="formData.deposit" :style="{ width: '480px' }" theme="normal" placeholder="请输入押金" />
        </t-form-item>
        <t-form-item label="管理费" name="management">
          <t-input-number v-model="formData.management" :style="{ width: '480px' }" theme="normal" placeholder="请输入管理费" />
        </t-form-item>
        <t-form-item label="其他费用" name="other_charges">
          <t-input-number v-model="formData.other_charges" :style="{ width: '480px' }" theme="normal"
            placeholder="请输入其他费用" />
        </t-form-item>
        <t-form-item label="备注" name="note">
          <t-input v-model="formData.note" :style="{ width: '480px' }" placeholder="请输入备注" />
        </t-form-item>
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
  <t-loading :loading="loading" text="加载中..." fullscreen />
</template>

<script setup lang="ts">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { ref, watch } from 'vue';

import { saveUncollected } from '@/api/house/uncollected';

const form = ref(null);

// 父给子传值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

// 加载
const loading = ref(false);

export interface FormData {
  id: number;
  property_name: string;
  name: string;
  electricity_meter_last_month: number;
  water_meter_last_month: number;
  meter_reading_time: string;
  electricity_meter_this_month: number;
  water_meter_this_month: number;
  rental: number;
  deposit: number;
  management: number;
  other_charges: number;
  note: string;
}
// 初始化数据
const INITIAL_DATA: FormData = {
  id: 0,
  property_name: '',
  name: '',
  electricity_meter_last_month: undefined,
  water_meter_last_month: undefined,
  meter_reading_time: '',
  electricity_meter_this_month: 0,
  water_meter_this_month: 0,
  rental: 0,
  deposit: 0,
  management: 0,
  other_charges: 0,
  note: ''
};
const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const resetType = 'initial';

// 表单规则
const rules: FormRules<FormData> = {
  name: [{ required: true, message: '房产名不能为空', type: 'error' }],
  electricity_meter_last_month: [{ required: true, message: '不能为空', type: 'error' }],
};

// 取消按钮
const onClickCloseBtn = () => {
  formVisible.value = false;
};
// 关闭dialog是reset from
const closed = () => {
  form.value.reset();
  formData.value.id = 0;
};

// 提交按钮
const onSubmit = async ({ firstError }: SubmitContext<FormData>) => {
  if (!firstError) {
    try {
      loading.value = true;
      await saveUncollected(formData.value);
      emit("refreshData");
    } catch (e) {
      if (e.response && e.response.data.code === 995) {
        MessagePlugin.error(e.response.data.message);
      } else {
        MessagePlugin.error('系统错误');
      }
    } finally {
      loading.value = false;
      formVisible.value = false;
    }
  } else {
    // console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 监视
const emit = defineEmits(['update:visible', 'refreshData']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);
watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);
watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);
</script>
